<template>
  <view class="orderDetails_">
    <view class="main_wrapper">
      <!--     我的订单 -->
      <view class="order_info_wrapper">
        <view class="header_">
          <image src="/static/order/2.png"></image>
          <text>
            {{
              orderList.orderType == 1
                ? "普通订单"
                : orderList.orderType == 2
                ? "礼包订单"
                : orderList.orderType == 3
                ? "兑换订单"
                : ""
            }}
          </text>
        </view>
        <view class="order_item">
          <view
            class="item_wrapper"
            v-for="(item, index) in orderList.orderItems"
            :key="index"
          >
            <image :src="httpUrlFn(item.pic)" />
            <view class="right_">
              <view class="right_1">
                <view>{{ item.prodName }}</view>
                <view
                  >￥<text>{{ item.price }}</text></view
                >
              </view>
              <!--              <view class="right_2">-->
              <!--                <view>佣金:￥<text>100</text></view>-->
              <!--              </view>-->
              <view class="right_3">
                <view>{{
                  item.properties
                    .replace("{", "")
                    .replace("}", "")
                    .replace(/"/gi, "")
                }}</view>
                <view>x{{ item.quantity }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="money_wrapper">
          <view>
            <view>共{{ quantity }}件</view>
            <text>商品小计：</text>
            <text class="money_">￥{{ orderList.payMoney }}</text>
          </view>
        </view>
      </view>
      <!--    售后信息填写  -->
      <u-select v-model="show" :list="list" @confirm="confirm1"></u-select>
      <u-select v-model="show2" :list="list2" @confirm="confirm2"></u-select>
      <view class="freight_">
        <u-form :model="formData" ref="uForm" label-width="150">
          <u-form-item label="售后类型" prop="after_sales_type">
            <u-input
              v-model="formData.after_sales_type"
              @click="show = true"
              :type="type"
              :select-open="show"
              disabled="true"
              placeholder-style="text-align:right"
              class="input_wrapper"
            />
            <!--            <image  class="img_"  src="/static/order/selected.png"></image>-->
          </u-form-item>
          <u-form-item label="售后原因" prop="message">
            <u-input
              v-model="formData.message"
              @click="show2 = true"
              :type="type2"
              :select-open="show2"
              disabled="true"
              placeholder-style="text-align:right"
              class="input_wrapper"
            />
          </u-form-item>
          <!--          <u-form-item label="售后说明" prop="illustrate" label-position="top">-->
          <!--            <view class="textarea_wrapper">-->
          <!--              <u-input-->
          <!--                v-model="formData.illustrate"-->
          <!--                type="textarea"-->
          <!--                maxlength="30"-->
          <!--                placeholder="请输入售后说明（选填）"-->
          <!--              />-->
          <!--              <text>{{ formData.illustrate.length || 0 }}/30</text>-->
          <!--            </view>-->
          <!--          </u-form-item>-->
        </u-form>
      </view>
      <!--      <view class="freight_">-->
      <!--        <view>上传凭证</view>-->
      <!--        <view class="upload_">-->
      <!--          <u-upload-->
      <!--            :file-list="fileList"-->
      <!--            :before-upload="beforeUpload"-->
      <!--            :max-count="6"-->
      <!--            :show-upload-list="showUploadList"-->
      <!--            :deletable="true"-->
      <!--            :show-progress="true"-->
      <!--            :previewFullImage="true"-->
      <!--            ref="uploadRef"-->
      <!--            @on-remove="removePic($event)"-->
      <!--            @on-success="successUpload($event)"-->
      <!--          >-->
      <!--            <view-->
      <!--              slot="addBtn"-->
      <!--              class="slot-btn"-->
      <!--              hover-class="slot-btn__hover"-->
      <!--              hover-stay-time="150"-->
      <!--            >-->
      <!--              <view class="image_">-->
      <!--                <image src="/static/order/upload.png" />-->
      <!--                <text>上传凭证 </text>-->
      <!--                <text>(最多6张)</text>-->
      <!--              </view>-->
      <!--            </view>-->
      <!--          </u-upload>-->
      <!--        </view>-->
      <!--      </view>-->
    </view>
    <!--   按钮 -->
    <view class="footer_wrapper">
      <view class="but_wrapper">
        <view>
          <view class="submitApplication" @click="submitFn">提交申请</view>
        </view>
      </view>
    </view>
    <u-modal
      v-model="showModel"
      @confirm="confirm"
      title="温馨提示"
      ref="uModal"
      :async-close="true"
      :content="showModelContent"
      show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import UFormItem from "@/uview-ui/components/u-form-item/u-form-item";
import { BASE_URL_IMAHE } from "../../../../utils/https";
import { refundOrder, updateOrderStatusByOrderSn } from "@/api/orderApi";
export default {
  name: "index.vue",
  components: { UFormItem },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(options) {
    console.log(options, "options");
    if (options) {
      this.orderList = JSON.parse(decodeURIComponent(options.order));
      console.log(JSON.parse(JSON.stringify(this.orderList)), "orderList");
      this.orderList.orderItems.forEach((item) => {
        this.quantity += item.quantity;
      });
      if (this.orderList.status === 1) {
        this.list = [
          {
            value: "1",
            label: "退款",
          },
        ];
        this.formData.after_sales_type = this.list[0].label;
      } else if (this.orderList.status === 3) {
        this.list = [
          {
            value: "1",
            label: "退货退款",
          },
          {
            value: "2",
            label: "换货",
          },
        ];
      }
    }
  },
  data() {
    return {
      quantity: 0,
      //订单信息
      orderList: {},
      fileList: [],
      showUploadList: true,
      type: "text",
      type2: "select",
      timestamp: 3,
      showModel: false,
      showModelContent: "",
      formData: {
        after_sales_type: "",
        message: "",
      },
      rules: {
        after_sales_type: [
          {
            required: true,
            message: "请选择售后类型",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        message: [
          {
            required: true,
            message: "请选择退款原因",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
      },
      show: false,
      show2: false,
      list: [
        {
          value: "1",
          label: "退款",
        },
      ],
      list2: [
        {
          value: "1",
          label: "不想买了",
        },
        {
          value: "2",
          label: "买错商品",
        },
        {
          value: "3",
          label: "地址写错了",
        },
        {
          value: "4",
          label: "其他",
        },
      ],
    };
  },
  methods: {
    httpUrlFn(item) {
      return BASE_URL_IMAHE + item;
    },

    confirm1(e) {
      const { value, label } = e[0];
      console.log(value, "value");
      console.log(e, "选择器");
      this.formData.after_sales_type = label;
      console.log(this.formData, "formData");
      this.type = "text";
    },
    confirm2(e) {
      const { value, label } = e[0];
      console.log(value, "value");
      console.log(e, "选择器");
      this.formData.message = label;
      console.log(this.formData, "formData");
      this.type2 = "text";
    },

    submitFn() {
      console.log("取消订单");
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          console.log("验证通过");
          this.showModel = true;
          const { orderSn, status, id, index, num, confirmStatus } =
            this.orderList;
          if (num === 5) {
            this.showModelContent = "是否确定申请退款？";
          }
        } else {
          console.log("验证失败");
        }
      });
    },

    navBackFn() {
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2]; //上一个页面
      const object = {
        swiperCurrent: 0,
        current: 0,
      };
      prevPage.$vm.otherFun(object); //重点$vm
      uni.navigateBack({
        delta: 1,
      });
    },

    // 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
    async confirm() {
      console.log("点击了确定");
      console.log(this.formData.after_sales_type, "after_sales_type");
      const { orderSn, status, id, index, num, confirmStatus } = this.orderList;

      const params = {
        orderSn,
        refundType:
          this.formData.after_sales_type === "退款"
            ? 0
            : this.formData.after_sales_type === "退货退款"
            ? 1
            : this.formData.after_sales_type === "换货"
            ? 3
            : "",
        message: this.formData.message,
      };

      //申请退款
      const res = await refundOrder(params);
      console.log(res, "申请退款");
      if (res.code === 0) {
        this.showModel = false;
        uni.showToast({
          title: `申请已提交`,
          icon: "success",
          duration: 2000,
        });
        setTimeout(() => {
          // this.navBackFn();

          //跳转到售后列表,后面写
          uni.redirectTo({
            url: "/pages/subpackage/afterSale/index",
          });
        }, 2000);
      } else {
        this.showModel = false;
        uni.showToast({
          title: `操作失败`,
          icon: "error",
          duration: 2000,
        });
      }

      // //确认收货状态：0->未确认；1->已确认
      // const confirmToggle = confirmStatus && confirmStatus > 0 ? 1 : 0;
      // //确认收货时间
      // const time = new Date().getTime();
      // console.log(time, "time");
      // const data = {
      //   orderSn,
      //   status: num,
      //   confirmStatus: confirmStatus && confirmStatus > 0 ? 1 : 0,
      //   receiveTime: confirmToggle === 1 ? time : "",
      //   message: this.formData.message,
      // };
      // const prompt = {
      //   5: "申请已提交",
      //   4: "取消订单成功",
      //   3: "确认收货成功",
      // };
      // let res = {};

      // console.log(data, "data");

      // res = await updateOrderStatusByOrderSn(data);
      // if (res.code === 0) {
      //   this.showModel = false;
      //   //根据index删除数组中取消的那一项
      //   uni.showToast({
      //     title: `${prompt[num]}`,
      //     icon: "success",
      //     duration: 2000,
      //   });
      //   setTimeout(() => {
      //     this.navBackFn();
      //
      //     //跳转到售后列表,后面写
      //     // uni.navigateTo({
      //     //   url: "/pages/subpackage/afterSale/index",
      //     // });
      //   }, 2000);
      // } else {
      //   this.showModel = false;
      //   uni.showToast({
      //     title: `操作失败`,
      //     icon: "error",
      //     duration: 2000,
      //   });
      // }
    },

    beforeUpload(index, list) {
      console.log(index, "index 上传前");
      console.log(list, "list 上传前");
    },
    //移除图片
    removePic(e) {
      console.log(this.fileList, "fileList");
      console.log(e, "移除图片");
    },
    successUpload(index) {
      console.log(index, "index上传成功");
    },
  },
};
</script>

<style scoped lang="scss">
.orderDetails_ {
  //background: #F5F5F5;
  height: 100vh;
  //background: pink;
  > .main_wrapper {
    background: #f5f5f5;
    margin: rpx(0) rpx(12) rpx(16);
    display: flex;
    flex-direction: column;
    padding-bottom: rpx(80.8);
    > .order_info_wrapper {
      margin-top: rpx(8);
      padding: rpx(16) rpx(12);
      width: rpx(351);
      //height: rpx(264);
      background: #ffffff;
      border-radius: rpx(5);
      > .header_ {
        > image {
          width: rpx(14);
          height: rpx(14);
          vertical-align: middle;
          margin-right: rpx(4);
        }
        > text {
          font-size: rpx(13);
          font-weight: 400;
          color: #353535;
        }
      }
      > .order_item {
        padding-bottom: rpx(8);
        border-bottom: rpx(1) solid #efefef;
        > .item_wrapper {
          padding: rpx(8) rpx(0);
          display: flex;
          > image {
            width: rpx(72);
            height: rpx(72);
            vertical-align: middle;
          }
          > .right_ {
            margin-left: rpx(6);
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > .right_1 {
              display: flex;
              justify-content: space-between;
              view:first-child {
                font-size: rpx(12);
                font-weight: 400;
                color: #353535;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; /*最大行数*/
              }
              view:last-child {
                font-size: rpx(12);
                font-weight: bold;
                color: #353535;
                margin-left: rpx(32);
              }
            }
            > .right_2 {
              display: flex;
              margin-top: rpx(2);
              margin-bottom: rpx(4);
              > view {
                padding: rpx(1) rpx(3);
                //height: rpx(16);
                background: rgba(250, 81, 81, 0.1);
                border-radius: rpx(2);
                border: rpx(1) solid #fa5151;
                font-size: rpx(10);
                font-weight: 400;
                color: #fa5151;
              }
            }
            > .right_3 {
              display: flex;
              justify-content: space-between;
              font-size: rpx(12);
              font-weight: 400;
              color: #888888;
            }
          }
        }
      }
      > .money_wrapper {
        display: flex;
        padding: rpx(12) rpx(12) rpx(0);
        color: #353535;
        font-size: rpx(13);
        > view {
          display: flex;
          margin-left: auto;
          align-items: center;
          view:first-child {
            margin-right: rpx(10);
          }
          > .money_ {
            color: #fa5151;
            font-weight: bold;
          }
        }
      }
    }
    > .freight_ {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: rpx(5);
      margin-top: rpx(8);
      padding: rpx(16) rpx(12);
      u-form-item::v-deep {
        .u-border-bottom:after {
          border: 0 !important;
        }
        .u-form-item {
          padding: 0;
        }
        .textarea_wrapper {
          background: #fafafa !important;
          padding: rpx(12) rpx(12) rpx(12) rpx(12);
          position: relative;
          textarea {
            padding-right: rpx(20);
          }
          text {
            position: absolute;
            right: rpx(6);
            bottom: rpx(0);
            font-size: rpx(12);
            font-weight: 400;
            color: #b2b2b2;
          }
        }
      }
      .img_ {
        width: rpx(16);
        height: rpx(16);
      }
      .input_wrapper::v-deep {
        input {
          text-align: right !important;
        }
      }
      > view {
        display: flex;
        justify-content: space-between;
        &:not(:first-child) {
          margin-top: rpx(16);
        }
      }
    }
  }
  > .footer_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    > .but_wrapper {
      background: #ffffff;
      padding: rpx(12);
      display: flex;
      margin-top: rpx(12);
      > view {
        display: flex;
        margin-left: auto;
        view {
          width: rpx(88);
          //height: rpx(32);
          border-radius: rpx(16);
          background: pink;
          border: rpx(1) solid #dddddd;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: rpx(15);
          font-weight: 400;
          color: #888888;
          &:not(:last-child) {
            margin-right: rpx(8);
          }
        }
        > .submitApplication {
          width: rpx(351);
          //height: rpx(44);
          padding: rpx(10) rpx(0);
          background: #fa5151;
          border-radius: rpx(22);
          font-size: rpx(17);
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}

.slot-btn {
  //width: rpx(72);
  //height: rpx(72);
  padding: rpx(9) rpx(15);
  display: flex;
  justify-content: center;
  align-items: center;
  //background: rgb(244, 245, 246);
  background: #ece9f3;
  border-radius: rpx(5);
  margin: rpx(0) rpx(5) rpx(5) rpx(0);
  .image_ {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    > image {
      width: rpx(32);
      height: rpx(32);
      vertical-align: middle;
      margin-bottom: rpx(4);
    }
    > text {
      font-size: rpx(12);
      font-weight: 400;
      color: #b2b2b2;
    }
  }
}

.upload_::v-deep {
  margin-top: rpx(16);
  .slot-btn {
    //background-color: rgb(235, 236, 238);
    background-color: #fafafa !important;
  }

  .u-list-item.u-add-wrap {
    width: rpx(90) !important;
    height: rpx(90) !important;
    background: #ece9f3;
    border-radius: rpx(5);
    margin: rpx(0) rpx(5) rpx(5) rpx(0);
    display: none;
  }

  .u-list-item.u-preview-wrap {
    width: rpx(90) !important;
    height: rpx(90) !important;
    background: #ece9f3;
    border-radius: rpx(5);
    margin: rpx(0) rpx(5) rpx(5) rpx(0);
  }
}
</style>
